<template>
	<div class="es-menu" :style="{ width: collapsed ? '80px' : '220px' }">
		<a-menu :inline-collapsed="collapsed" v-model:selectedKeys="selectedKeys" mode="inline" :items="items" @click="handleClick"></a-menu>
		<!-- 实现折叠 -->
		<div class="collapsed-menu" @click="collapsed = !collapsed">
			<a-tooltip :arrow="false" v-if="collapsed">
				<template #title>展开</template>
				<svg data-icon="menu-unfold" width="1em" height="1em" viewBox="64 64 896 896">
					<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z"></path>
				</svg>
			</a-tooltip>
			<a-tooltip :arrow="false" v-else>
				<template #title>折叠</template>
				<svg data-icon="menu-fold" width="1em" height="1em" viewBox="64 64 896 896">
					<path
						d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path>
				</svg>
			</a-tooltip>
		</div>
	</div>
</template>

<script setup lang="ts">
import router from '../router';
import { MenuProps } from 'ant-design-vue';
import { useLocale } from '../hooks/locale';
import { generateSidebar } from '../utils/aside';
import { onMounted, reactive, ref, toRef } from 'vue';

/** 通过解析 routes 实现动态的菜单 */
let items = toRef(generateSidebar());

// 通过监听 locale 来实现更新 items
const { localeChange } = useLocale();
localeChange(() => (items.value = generateSidebar()));

// 定义新的菜单结构

const collapsed = ref(false);

// 这个是由当前 router path 动态决定的
const selectedKeys = reactive<string[]>([]);

const handleClick: MenuProps['onClick'] = ({ key }) => {
	const path = <string>key;
	// 切换菜单
	selectedKeys[0] = path;
	// 路由跳转
	router.push({ path });
};

onMounted(() => {
	// 初始化选中
	selectedKeys[0] = router.currentRoute.value.path || '/home/index';
});
</script>

<style lang="less" scoped>
.es-menu,
.ant-menu {
	height: 100%;
	position: relative;
	transition: all 0.3s;
}
.collapsed-menu {
	position: absolute;
	bottom: 0;
	height: 40px;
	width: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	border-top: solid var(--colorBorderSecondary) 1px;
	svg {
		outline: none;
		transition: all 0.3s;
		fill: var(--colorText);
	}
}
</style>
